<template>
  <div>
      <s-table :search-params="searchParams" :COLUMNS="columns" :async-fc="page" ref="table">
          <template #tableHeader>
              <t-button @click="insert">新增信息</t-button>
          </template>
      </s-table>
      <t-dialog v-model:visible="modalOpen" @confirm="onModalSubmit">
          <t-form ref="submitFormRef" :rules="FORM_RULES" :data="submitForm">
              <t-form-item :label="t('pages.foodType.title')" name="title">
                  <t-input v-model="submitForm.title" :placeholder="t('pages.foodType.titlePlaceholder')"/>
              </t-form-item>
              <t-form-item :label="t('pages.foodType.icon')" name="icon">
                  <t-select clearable filterable :options="iconOptions" v-model="submitForm.icon" @change="changeIcon" :placeholder="t('pages.foodType.iconPlaceholder') ">
                    <template #prefixIcon>
                      <icon v-if="submitForm.icon" :url="ioconfontUrl" :name="submitForm.icon"  />
                    </template>
                  </t-select>
              </t-form-item>
              <t-form-item :label="t('pages.foodType.remarks')" name="remarks">
                  <t-input v-model="submitForm.remarks" :placeholder="t('pages.foodType.remarksPlaceholder')"/>
              </t-form-item>
          </t-form>
      </t-dialog>
  </div>
</template>
<script setup lang="ts">
/*****                                          引用部分开始                                          *****/
import { ref } from "vue";
import { ClearIcon, Icon } from "tdesign-icons-vue-next";
import { t } from "@/locales";
import STable from '@/components/s-table/index.vue';
import { TableInstanceFunctions } from "@/components/s-table/type";
import { searchParams,COLUMNS,FORM_RULES,iconOptions,ioconfontUrl } from '../components/props/type'

import { page, saveApi, deleteById,getoptions } from "@/api/foodType";
import { FormInstanceFunctions, Link, Space, MessagePlugin, DialogPlugin } from "tdesign-vue-next";
/*****                                          引用部分结束                                          *****/


/*****                                          属性定义部分开始                                          *****/
const submitForm = ref({
  id:null,
  title:'',
  icon:'',
  remarks:''
  //添加所用到的字段
});
const modalOpen = ref(false);
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<TableInstanceFunctions>(null);
const changeIcon = (value:any) => {
  submitForm.value.icon = value;
}
/*****                                          属性定义部分结束                                          *****/


const columns = COLUMNS.concat([{
  align: 'left',
  fixed: 'right',
  colKey: 'op',
  title: t('components.commonTable.operation'),
  cell: (h, slot:{row:any}) => h(Space, {}, [
      h(Link, {
          theme: 'primary',
          onClick: () => {
              submitForm.value = slot.row;
              modalOpen.value = true;
          }
      }, '修改'),
      h(Link, {
          theme: 'danger',
          onClick: () => {
              const confirmDialog = DialogPlugin.confirm({
                  header: `提示`,
                  body: `删除后，标记为${slot.row.id}的所有信息将被清空，且无法恢复`,
                  confirmBtn: {
                      content: '提交',
                      theme: 'primary',
                      loading: false,
                  },
                  theme: 'warning',
                  onConfirm: async () => {
                      confirmDialog.update({ confirmBtn: { content: '提交中', loading: true } });
                      await deleteById(slot.row.id);
                      MessagePlugin.success('删除成功！');
                      table.value.onSearch();
                      confirmDialog.update({ confirmBtn: { content: '提交', loading: false } });
                      confirmDialog.hide();
                  },
              })
          }
      }, '删除'),
  ])
}]);


/*****                                          页面方法开始                                          *****/
const insert = () => {
  modalOpen.value = true;
  submitForm.value = {
  //配置默认值，但是也要把用到字段写出来
  id:null,
  title:'',
  icon:'',
  remarks:''
  };
  // 重置表单实例
  if (submitFormRef.value) {
     submitFormRef.value.reset();
}
}

/**
* 提交表单
*/
const onModalSubmit = async () => {
  const valid = await submitFormRef.value.validate();
  if (valid === true) {
      await saveApi(submitForm.value);
      MessagePlugin.success('操作成功！');
      modalOpen.value = false;
      table.value.onSearch();
  }
}
/*****                                          页面方法结束                                          *****/
</script>